<template>
  <div class="scheduler-container">
    <div class="sidebar">
      <h2 class="sidebar-title">医疗排班系统</h2>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical"
        text-color="#fff"
      >
        <el-menu-item index="1" @click="navigateTo('schedules')">
          <span>排班管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="navigateTo('holidays')">
          <span>假期管理</span>
        </el-menu-item>
      </el-menu>
      <div class="logout-container">
        <el-button class="logout-btn" @click="handleLogout">退出登录</el-button>
      </div>
    </div>
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const navigateTo = (module) => {
  router.push(`/scheduler/${module}`)
}

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.scheduler-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #545c64;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-title {
  text-align: center;
  padding: 20px 0;
  color: white;
  margin: 0;
}

.el-menu-vertical {
  border-right: none;
  flex: 1;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.logout-container {
  padding: 20px;
  text-align: center;
}

.logout-btn {
  width: 100%;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.logout-btn:hover {
  background-color: #e05c5c;
  border-color: #e05c5c;
}
</style>